<template>
  <div class="container">
    <h3 style="text-align: left">附近店铺</h3>
    <div class="container__items">
      <template  v-for="item in nearbyList" :key="item._id">
        <ShopInfo  :isRouter="1" :item="item"></ShopInfo>
      </template>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { get } from '../../../utils/request'
import ShopInfo from './shopInfo'
const useNearbyListEffect = () => {
  const nearbyList = ref([]);
  const getNearbyList = async () => {
    const result = await get("/api/shop/hot-list");
    if (result?.errno === 0 && result?.data?.length) {
      nearbyList.value = result.data;
    }
  };
  return { nearbyList, getNearbyList };
};
export default {
  components:{
    ShopInfo,
  },
  setup() {
    const { nearbyList, getNearbyList } = useNearbyListEffect();
    getNearbyList();
    return { nearbyList };
  },
};
</script>
<style lang="scss" scoped>
.container {
  margin-left: 18px;
}
</style>
